<template>
  <div class="box">
      <div class="box-top">
            <div class="box-left" @click="fn">&lt;</div>
            <div class="box-right">
                <div class="box-text">门店自提</div>
                <div class="box-text songhuo">送货上门</div>
                <div class="box-text">瑞即购</div>
            </div>
      </div>
      <div class="xukuang">
          <div class="xu-left" @click="xuanze">
              <span class="xu-sp" >{{$store.state.dizhi}}</span>
              <span class="xu-sp">v</span>
              <span class="xu-sp xu-xia">|</span>
          </div>
          <img src="../assets/1.jpg" class="xu-img">
          <input type="text" class="ipt" placeholder="输入地址">
      </div>
      <div class="shouhuo">收货地址</div>
      <div class="timm" v-for="weizhie in weizhi" :key="weizhie.id">
          <p class="xianxidi">{{weizhie.detailAddr}}（{{weizhie.houseNumber}}）</p>
          <p class="chenhu"><span class="spcc">公司</span>  {{weizhie.userName}}先生 {{weizhie.tel}}</p>
          <img src="../assets/5.jpg" class="item-img" @click="xiu">
      </div>
      <div class="fotter" @click="dizhi">添加地址</div>
  </div>
</template>

<script>
import axios from "../utils/request"
export default {
    name:'Waisong',
    data(){
        return {
            weizhi:[],
            str:'',
            sum:''
        }
    },
    methods:{
        fn(){
            this.$router.push("/Caidan");
        },
        xuanze(){
            this.$router.push("/City")
        },
        dizhi(){
            this.$router.push("/Dizhi")
        },
        xiu(){
            this.$router.push("/Dizhi")
        }
    },
    mounted(){
        axios({
            url:'/apf/addr/selectAddrByUserId/4',
            // params:{
            //     userId:1
            // }
        })
        .then(res=>{
            console.log(res.data.data);
            this.weizhi = res.data.data
        });
        switch (this.weizhi.sex) {
            case 1:
              return this.str = "先生";
            case 2:
              return this.str = "女士";
            default:
              break;
          }
          console.log(this.str);
        switch (this.weizhi.label) {
          case 1:
            return this.sum = "公司";
          case 2:
            return this.sum = "家";
          case 3:
            return this.sum = "学校";
          default:
            break;
        }
    }
}
</script>

<style scoped>
.box-top{
    width: 3.6rem;
    height: 0.45rem;
    position: fixed;
    top: 0;
}
.box-top .box-left{
    font-size: 0.2rem;
    float: left;
    width: 0.45rem;
    height: 0.45rem;
    text-align: center;
    line-height: 0.45rem;
}
.box-top .box-right{
    width: 2.46rem;
    height: 0.3rem;
    border-radius: 0.15rem;
    background-color: #6d86c4;
    float: left;
    margin: 0.08rem 0 0 0.12rem;
    display: flex;
}
.box-right .box-text{
    font-size: 0.13rem;
    color: #fff;
    text-align: center;
    line-height: 0.3rem;
    flex: 1;
}
.box-right .songhuo{
    border-radius: 0.15rem;
    background-color: #fff;
    color: #6d86c4;
}
.box .xukuang{
    width: 3.4rem;
    height: 0.3rem;
    margin: 0.5rem auto 0;
    background-color: #fff;
    border-radius: 0.04rem;
}
.xukuang .xu-left{
    width: 0.94rem;
    height: 0.3rem;
    float: left;
    display: flex;
    justify-content: space-evenly;
}
.xu-left .xu-sp{
    font-size: 0.12rem;
    line-height: 0.3rem;
}
.xu-left .xu-xia{
    color: #e6e6e6;
}
.xukuang .xu-img{
    float: left;
    margin-top: 0.08rem;
}
.xukuang .ipt{
    float: left;
    display: block;
    outline: none;
    text-indent: 0.05rem;
    height: 0.3rem;
    border: none;
    font-size: 0.13rem;
}
.box .fotter{
    position: fixed;
    bottom: 0;
    width: 3.3rem;
    height: 0.42rem;
    background-color: #6d86c4;
    border-radius: 0.21rem;
    font-size: 0.16rem;
    text-align: center;
    line-height: 0.42rem;
    margin-left: 0.15rem;
    margin-bottom: 0.1rem;
    color: #fff;
}
.box .shouhuo{
    width: 100%;
    height: 0.36rem;
    font-size: 0.12rem;
    text-indent: 0.1rem;
    line-height: 0.36rem;
    color: #535353;
}
.box .timm{
    width: 3.4rem;
    height: 0.7rem;
    background-color: #fff;
    border-radius: 0.08rem;
    margin: auto;
    position: relative;
}
.timm .xianxidi{
    width: 2.8rem;
    font-size: 0.14rem;
    margin-left: 0.1rem;
    padding-top: 0.1rem;
}
.timm .chenhu{
    margin-left: 0.1rem;
    line-height: 0.28rem;
    font-size: 0.12rem;
    color: #888888;
}
.chenhu .spcc{
    color: #fff;
    background-color: cornflowerblue;
    font-size: 0.12rem;
}
.timm .item-img{
    position: absolute;
    top: 0.28rem;
    right: 0.1rem;
}
</style>